<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>商户明细</el-breadcrumb-item>
				<el-breadcrumb-item>提现管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item prop="payinfoId" label="收款方式">
								<el-select v-model="model.payinfoId" :disabled="model.handleStatus==2||model.handleStatus==3" placeholder="请选择...">
									<el-option v-for="item in payinfoList"
										:key="item.id"
										:label="item.payType+'（'+item.fullName+'）'"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="transferAmount" label="提现金额">
								<el-input v-model="model.transferAmount" 
									:disabled="model.handleStatus==2||model.handleStatus==3" placeholder="必填，可保留金额小数后两位">
									<template slot="append">元</template>
								</el-input>
							</el-form-item>
							<el-form-item label="申请备注">
								<el-input type="textarea" :rows="3" 
									:disabled="model.handleStatus==2||model.handleStatus==3"
									v-model="model.addRemark" maxlength="512" show-word-limit placeholder="必填，512个字符内"></el-input>
							</el-form-item>
							<el-form-item label="申请时间" v-if="model.id>0">
								{{model.addTime}}
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="审核结果" name="handle" v-if="model.id>0">
						<div class="tab-content">
							<el-form-item label="转账类型">
								{{model.payType}}
							</el-form-item>
							<el-form-item label="收款人姓名">
								{{model.fullName}}
							</el-form-item>
							<el-form-item label="开户银行" v-if="model.bankName">
								{{model.bankName}}
							</el-form-item>
							<el-form-item label="收款账号">
								{{model.accountNo}}
							</el-form-item>
							<el-form-item label="收款二维码">
								<div class="preview-box">
									<el-image :src="$api.loadFile(model.qrCode)" :preview-src-list="[$api.loadFile(model.qrCode)]"></el-image>
								</div>
							</el-form-item>
							<el-form-item label="处理状态">
								<el-tag size="small" type="danger" effect="dark" v-if="model.handleStatus==1">待审核</el-tag>
								<el-tag size="small" type="warning" effect="dark" v-else-if="model.handleStatus==2">已审核</el-tag>
								<el-tag size="small" type="success" effect="dark" v-else-if="model.handleStatus==3">已完成</el-tag>
								<el-tag size="small" type="info" effect="dark" v-else-if="model.handleStatus==4">审核失败</el-tag>
							</el-form-item>
							<el-form-item label="处理时间" v-if="model.handleStatus>1">
								{{model.handleTime}}
							</el-form-item>
							<el-form-item label="审核意见" v-if="model.handleStatus>1">
								{{model.handleRemark}}
							</el-form-item>
							<el-form-item label="转账凭证" v-if="model.handleStatus==3">
								<div class="preview-box">
									<el-image :src="$api.loadFile(model.payImgUrl)" :preview-src-list="[$api.loadFile(model.payImgUrl)]"></el-image>
								</div>
							</el-form-item>
							<el-form-item label="到账时间" v-if="model.handleStatus==3">
								{{model.payTime}}
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :disabled="model.handleStatus==2||model.handleStatus==3" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtUpload from '../../../components/DtUpload.vue'
	
	export default {
		components: {
			DtUpload
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				payinfoList: [],
				model: {
					id: 0,
					merchantId: 0,
					payinfoId: null,
					transferAmount: null,
					addRemark: null,
					addTime: null,
					handleStatus: null,
					handleTime: null,
					handleRemark: null,
					payImgUrl: null,
					payTime: null,
					payType: null,
					fullName: null,
					bankName: null,
					accountNo: null,
					qrCode: null,
				},
				rules: {
					payinfoId: [
						{ required: true, message: '请选择收款方式', trigger: 'change' }
					],
					transferAmount: [
						{ required: true, message: '请输入提现金额', trigger: 'blur' },
						{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
					],
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				if (_this.id) {
					_this.$api.request({
						url: `/merchant/cash/${_this.id}`,
						loading: true,
						success(res) {
							console.log(res.data)
							//赋值给model
							Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
						}
					});
				}
				_this.$api.request({
					url: '/merchant/payinfo/view/0',
					success(res) {
						_this.payinfoList = res.data;
					}
				});
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve();
					});
				});
				Promise.all([f1]).then(() => {
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: `/merchant/cash/${_this.model.id}`,
							data: _this.model,
							successMsg: '修改提现信息已成功',
							beforeSend() {
								_this.loading = true;
							},
							success(res) {
								_this.$common.linkUrl('/merchant/cash/list');
							},
							complete() {
								_this.loading = false
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: '/merchant/cash',
							data: _this.model,
							successMsg: '提现信息提交成功',
							beforeSend() {
								_this.loading = true
							},
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>

<style lang="scss">
	.preview-box {
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		width: 120px;
		height: 120px;
		overflow: hidden;
		img {
			max-width: 100%;
			max-height: 100%;
		}
	}
</style>